<template>
	<div class="search-call-record-container">
		<el-form label-position="top" label-width="80px" :model="form">
			<el-form-item label="呼叫时间">
				<el-col :span="11">
					<el-date-picker v-model="form.createdAtStart" type="datetime" placeholder="选择日期时间" align="right" :picker-options="pickerOptions"> </el-date-picker>
				</el-col>
				<el-col class="scene-line" :span="2">&nbsp;</el-col>
				<el-col :span="11">
					<el-date-picker v-model="form.createdAtEnd" type="datetime" placeholder="选择日期时间" align="right" :picker-options="pickerOptions"> </el-date-picker>
				</el-col>
			</el-form-item>
			<el-form-item label="SessionID" style="margin-left: -10px">
				<el-input placeholder="请输入SessionID" v-model="form.sessionId"></el-input>
			</el-form-item>
			<el-form-item label="用户ID">
				<el-input placeholder="请输入用户ID" v-model="form.userId"></el-input>
			</el-form-item>
			<el-form-item label="黑名单分组名">
				<el-input placeholder="请输入黑名单分组名" v-model="form.banGroupName"></el-input>
			</el-form-item>
			<el-form-item label="呼叫业务场景">
				<el-input placeholder="请输入呼叫业务场景" v-model="form.sceneName"></el-input>
			</el-form-item>
			<el-form-item label="" class="btn">
				<el-button @click="searchData">检索</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
	data() {
		return {
			form: {
				createdAtStart: '',
				createdAtEnd: '',
				sessionId: '',
				userId: '',
				banGroupName: '',
				sceneName: ''
			},
			pickerOptions: {
				shortcuts: [
					{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					},
					{
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					},
					{
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}
				]
			}
		};
	},
	methods: {
		searchData() {
			this.form.createdAtStart = this.form.createdAtStart ? this.$moment(this.form.createdAtStart).toISOString() : '';
			this.form.createdAtEnd = this.form.createdAtEnd ? this.$moment(this.form.createdAtEnd).toISOString() : '';
			this.$emit('searchData', this.form);
		}
	}
};
</script>

<style lang="less" scoped>
.search-call-record-container {
	.el-form {
		display: flex;
		flex-wrap: wrap;
		.el-form-item {
			padding-right: 18px;
			margin: 0;
		}

		.btn {
			padding: 0;
			.el-button {
				height: 34px;
				width: 64px;
				padding: 0;
				border: 1px solid #6384fe;
				color: #6384fe;
				border-radius: 4px;
			}
		}
	}
}
</style>

<style lang="less">
.search-call-record-container {
	.el-form-item {
		label {
			padding: 0;
		}
		input {
			height: 34px;
		}
	}
	.btn {
		.el-form-item__content {
			line-height: 120px;
		}
	}
	.scene-line {
		text-align: center;
		// padding: 0 10px;
	}
	.el-col-2 {
		width: 20px;
	}
}
</style>
